<template>
  <div>
    <!--面包屑导航区</h3>-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理</el-breadcrumb-item>
      <el-breadcrumb-item>酒店列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图-->
    <el-card class="box-card">
      <div>
        <!--搜索框-->
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="酒店名">
            <el-input v-model="form.hotelName" placeholder="酒店名"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address" placeholder="地址"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="form.city" placeholder="城市"></el-input>
          </el-form-item>
          <el-form-item label="营业状态">
            <el-select v-model="form.hotelStatus" placeholder="营业">
              <el-option label="营业" value="0"></el-option>
              <el-option label="暂停营业" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <!--新增-->
        <el-button type="primary" @click="showAddDialog">新增</el-button>
        <!--重置-->
        <el-button type="primary" @click="reset">重置</el-button>
      </div>

      <!--表格-->
      <el-table
          stripe  :data="hotelList" border height="600px" style="width: 100%">
        <el-table-column
            width="60px" type="index">
        </el-table-column>
        <el-table-column
            align="center" prop="hotelName" label="酒店名" width="180">
        </el-table-column>
        <el-table-column
            align="center" prop="roomCount" label="房间数量" width="100">
        </el-table-column>
        <el-table-column
            align="center" prop="city"  label="所在城市" width="100">
        </el-table-column>
        <el-table-column
            align="center"  prop="address" label="地址" width="180">
        </el-table-column>
        <el-table-column align="center" prop="phone" label=电话>
        </el-table-column>
        <el-table-column align="center" prop="hotelStatus" label="状态">
          <template slot-scope="scope">
            {{ scope.row.hotelStatus ? '不营业' : '营业' }}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="createTime"
            width="100px"
            label=创建时间>
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="updateTime"
            width="100px"
            label=更新时间>
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>

        <el-table-column
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="right">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--编辑对话框-->
      <el-dialog
          title="编辑酒店信息"
          :visible.sync="editDialog"
          width="50%"
          @close="editDialog = false"
      >
        <el-form :model="form" ref="form" label-width="120px" :rules="rules">
          <el-form-item label="酒店名" prop="hotelName">
            <el-input v-model="form.hotelName"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="所在城市" prop="city">
            <el-input v-model="form.city"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="营业状态">
            <el-select v-model="form.hotelStatus" placeholder="修改状态">
<!--              <el-option label="停业(1)" value="1"></el-option>-->
<!--              <el-option label="正常(0)" value="0"></el-option>-->
              <el-option
                  v-for="o in getHotelStatus"
                  :key="o.value"
                  :label="o.label"
                  :value="o.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateHotel">确定</el-button>
            <el-button @click="editDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--新增对话框-->
      <el-dialog
          title="添加酒店"
          :visible.sync="addDialog"
          width="50%"
          @close="addDialog = false"
      >
        <el-form :model="addForm" ref="form" label-width="120px" :rules="rules">
          <el-form-item label="酒店名" prop="hotelName">
            <el-input v-model="addForm.hotelName"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="addForm.address"></el-input>
          </el-form-item>
          <el-form-item label="所在城市" prop="city">
            <el-input v-model="addForm.city"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="addForm.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addHotel">确定</el-button>
            <el-button @click="addDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'HotelTable',
  data() {
    return {
      hotelList: [],
      editDialog: false,
      addDialog: false,
      form: {
        id: '',
        hotelName: '',
        address: '',
        city: '',
        hotelStatus: '',
        phone: '',
      },
      addForm: {
        hotelName: '',
        address: '',
        city: '',
        phone: '',
      },
      rules: {
        hotelName: [
          {required: true, message: '酒店名', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 8 个字符', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '地址', trigger: 'blur'},
          {min: 2, message: '长度不少于2个字符', trigger: 'blur'}
        ],
        city: [
          {required: true, message: '城市', trigger: 'blur'},
          {min: 2, message: '长度不少于2个字符', trigger: 'blur'}
        ],
      },
      getHotelStatus:[
        {
          label:'营业',
          value:0,
        },
        {
          label:'不营业',
          value:1,
        }
      ],
      roomCountList:[],
    }
  },
  methods: {
    //控制对话框显示，编辑酒店
    showEditDialog(row) {
      this.editDialog = true;
      this.form = {...row};
    },
    showAddDialog() {
      this.addDialog = true;
    },
    //格式化时间显示
    formatDate(dateTimeString) {
      const dateTime = new Date(dateTimeString);
      // 返回格式化后的日期时间字符串
      return dateTime.toISOString().slice(0, 19).replace('T', ' ');
    },
    //获取酒店信息
    async getHotelList() {
      const {data: res} = await axios.get('/api/hotel/search')
      if (res.code!==0){
        this.$message.error(res.msg);
        return
      }
      this.hotelList = res.data.map(hotel => ({ ...hotel, roomCount: null ,minPrice: null,maxPrice: null }));
      // console.log(res)
    },
    //更新酒店信息
    async updateHotel() {
      const {data: res} = await axios.post('/api/hotel/update', this.form)
      if (res.code !== 0) {
        this.$message.error(res.message || res.description)
        this.editDialog = false;
        return
      }
      await this.getHotelList()
      this.editDialog = false;
      this.$message.success("修改成功")
      this.reset()
    },
    //查找酒店
    async toSearch() {
      try {
        const params = {
          hotelName: this.form.hotelName || null,
          city: this.form.city || null,
          address: this.form.address || null,
          hotelStatus: this.form.hotelStatus || null,
        };
        const response = await axios.get('/api/hotel/search', {params});
        if (response.data.code !== 0) {
          this.$message.error(response.data.description);
          return
        }
        this.hotelList = response.data.data;

      } catch (error) {
        this.$message.error(error)
      }
    },
    //重置搜索框
    reset() {
      this.getHotelList()
      this.form={}
    },
    //添加酒店
    async addHotel() {
      const {data: result} = await axios.post("/api/hotel/add", this.addForm)
      if (result.code === 0) {
        this.$message.success('添加成功')
        await this.getHotelList()

      } else
        this.$message.error(result.description)
      this.addDialog = false
    },
    //获取酒店房间数
    async getRoomCount(){
      const {data: res} = await axios.get('/api/hotel/count')
      if (res.code !== 0) {
        this.$message.error(res.msg||res.description||"请稍后再试");
        return
      }
      this.roomCountList = res.data;
      this.roomCountList.forEach(roomCountData => {
        const hotel = this.hotelList.find(hotel => hotel.id === roomCountData.id);
        if (hotel) {
          hotel.roomCount = roomCountData.roomCount;
        }
      });
    },

  },
  mounted() {
    this.getHotelList();
    this.getRoomCount()
  },
  created() {

  }
}

</script>
<style scoped>
</style>